<template>
  <div v-if="currentArea" class="full grid-box">
    <div class="header">
      <div>属性1</div>
    </div>
    <div class="content">
      <ElDescriptions :column="1" border>
        <ElDescriptionsItem label="类型" :min-width="80">
          <ElSelect v-model="currentArea.type">
            <ElOption label="无" value="" />
            <ElOption v-for="(label, type) in componentTypeOptions" :label="label" :value="type" :key="type" />
          </ElSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="名称" :min-width="80">
          <ElSelect v-model="currentArea.component">
            <ElOption v-for="(label, name) in components" :label="label" :value="name" :key="name" />
          </ElSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="!currentArea.type" label="内容" :min-width="80">
          <el-input type="textarea" v-model="currentArea.content" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="类名" :min-width="80">
          <ClassEditor v-model="currentArea.cls" />
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="currentArea.component === 'split'" label="布局" :min-width="80">
          <ElSelect v-model="splitProps.layout">
            <ElOption label="<无>" value="" />
            <ElOption label="水平" value="horizontal" />
            <ElOption label="垂直" value="vertical" />
          </ElSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="parentArea.component === 'split'" label="尺寸" :min-width="80">
          <ElInput v-model="splitPanelProps.size" />
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="parentArea.component === 'split'" label="最小尺寸" :min-width="80">
          <ElInput v-model="splitPanelProps.min" />
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="parentArea.component === 'split'" label="最大尺寸" :min-width="80">
          <ElInput v-model="splitPanelProps.max" />
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="parentArea.component === 'split'" label="可调整?" :min-width="80">
          <ElSwitch v-model="splitPanelProps.resizable" />
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="parentArea.component === 'split'" label="可折叠?" :min-width="80">
          <ElSwitch v-model="splitPanelProps.collapsible" />
        </ElDescriptionsItem>
      </ElDescriptions>
      <component v-if="currentArea.type && currentArea.component" :is="is" v-model="currentArea.componentProps" class="mt5px" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElInput, ElSelect, ElOption, ElDescriptions, ElDescriptionsItem, ElSwitch } from 'element-plus';
  import { computed, inject, ref, Ref, watch } from 'vue';
  import { componentTypeOptions, TreeViewType } from '..';
  import { ClassEditor } from '../../ClassEditor';
  import { componentProps } from '../../ComponentEditor';
  import componentSchema from '@/views/components/ComponentEditor/src/props'
  import { SplitterPanelProps } from '@/views/dev-types';

  const treeViewRef = inject<Ref<TreeViewType>>('treeViewRef', void 0)
  const currentArea = computed(() => treeViewRef.value?.getCurrentArea())
  const parentArea = computed(() => treeViewRef.value?.getCurrentNode()?.parent?.data)

  const components = computed(() => {
    const type = currentArea.value?.type
    if(!type) return {div: 'div', span: 'span', split: 'split'}

    const ret = {}
    for(const name in componentProps[type]) {
      ret[name] = componentProps[type][name].label
    }
    return ret
  })
  const is = computed(() => componentSchema[currentArea.value?.type]?.[currentArea.value?.component]?.component)

  function getInitSplitProps() {
    const layout = currentArea.value?.componentProps?.layout
    console.log('xxx', currentArea.value)
    return layout ? {layout} : {}
  }

  function getInitSplitPanelProps() {
    const ret: SplitterPanelProps = {}

    const props = currentArea.value?.componentProps
    if(props?.size) ret.size = props?.size
    if(props?.min) ret.min = props?.min
    if(props?.max) ret.max = props?.max
    if(props?.resizable !== void 0) ret.resizable = props?.resizable
    if(props?.collapsible !== void 0) ret.collapsible = props?.collapsible

    return ret
  }

  const splitProps = ref<{layout?: 'horizontal'|'vertical'}>(getInitSplitProps())
  const splitPanelProps = ref<SplitterPanelProps>(getInitSplitPanelProps())

  watch(() => currentArea.value?.componentProps?.layout, () => splitProps.value = getInitSplitProps())
  watch([
    () => currentArea.value?.componentProps?.size,
    () => currentArea.value?.componentProps?.min,
    () => currentArea.value?.componentProps?.max,
    () => currentArea.value?.componentProps?.resizable,
    () => currentArea.value?.componentProps?.collapsible
  ], () => splitPanelProps.value = getInitSplitPanelProps())

  watch(() => splitProps.value, (val) => {
    if(!currentArea.value) return

    if(val?.layout) {
      currentArea.value.componentProps = currentArea.value.componentProps || {}
      currentArea.value.componentProps.layout = val.layout
    } else {
      if(currentArea.value.componentProps) delete currentArea.value.componentProps.layout
    }
  }, {deep: true})

  watch(() => splitPanelProps.value, (val) => {
    if(!currentArea.value) return

    if(val?.size) {
      currentArea.value.componentProps = currentArea.value.componentProps || {}
      currentArea.value.componentProps.size = val.size
    } else {
      if(currentArea.value.componentProps) delete currentArea.value.componentProps.size
    }

    if(val?.min) {
      currentArea.value.componentProps = currentArea.value.componentProps || {}
      currentArea.value.componentProps.min = val.min
    } else {
      if(currentArea.value.componentProps) delete currentArea.value.componentProps.min
    }

    if(val?.max) {
      currentArea.value.componentProps = currentArea.value.componentProps || {}
      currentArea.value.componentProps.max = val.max
    } else {
      if(currentArea.value.componentProps) delete currentArea.value.componentProps.max
    }

    if(val?.resizable != void 0) {
      currentArea.value.componentProps = currentArea.value.componentProps || {}
      currentArea.value.componentProps.resizable = val.resizable
    } else {
      if(currentArea.value.componentProps) delete currentArea.value.componentProps.resizable
    }

    if(val?.collapsible != void 0) {
      currentArea.value.componentProps = currentArea.value.componentProps || {}
      currentArea.value.componentProps.collapsible = val.collapsible
    } else {
      if(currentArea.value.componentProps) delete currentArea.value.componentProps.collapsible
    }
  }, {deep: true})
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 35px minmax(0, 1fr);
    grid-template-areas: 'header' 'content';
  }
  .header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: antiquewhite;
    padding-left: 5px;
    padding-right: 5px;
  }
  .content {
    grid-area: content;
    padding: 5px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
</style>